<template>
  <div id="app">
    <!--  -->
    <div class="app-container">
      <div class="header">
        <el-button type="success" @click="addclick">新增+</el-button>
        <div>
          <el-input
            class="search-inp"
            v-model="input"
            placeholder="请输入姓名"
          ></el-input>
          <el-button type="success" @click="searchclick">搜索</el-button>
        </div>
      </div>

      <el-table :data="tablelist" style="width: 100%">
        <el-table-column label="序号" prop="ID" width="80"> </el-table-column>
        <el-table-column prop="Name" label="姓名" width="80"> </el-table-column>
        <el-table-column prop="Sex" label="性别" width="80">
          <template slot-scope="scope">
            <el-tag :type="scope.row.Sex == '0' ? 'success' : 'danger'">{{
              scope.row.Sex == "0" ? "男" : "女"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="80"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="changeclick(scope.row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="delclcik(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--  修改增加-->
    <el-dialog :title="title" :visible.sync="change">
      <el-form :model="form">
        <el-form-item label="序号" :label-width="formLabelWidth">
          <el-input
            v-model="form.ID"
            :disabled="disabled"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.Name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-radio-group v-model="form.Sex">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input v-model="form.age" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="change = false">取 消</el-button>
        <el-button v-show="changeshow" type="primary" @click="changebtn"
          >确定修改</el-button
        >
        <el-button v-show="addshow" type="primary" @click="addbtn"
          >确定新增</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      change: false,
      formLabelWidth: "120px",
      title: "修改信息",
      changeshow: false,
      addshow: true,
      disabled: true,
      input: "",
      form: {
        ID: "",
        Name: "",
        Sex: 0,
        age: "",
      },
      tableDatas: [
        {
          ID: 1,
          Name: "王大虎",
          Sex: 0,
          age: 23,
        },
        {
          ID: 2,
          Name: "王二虎",
          Sex: 1,
          age: 20,
        },
        {
          ID: 3,
          Name: "王三虎",
          Sex: 0,
          age: 18,
        },
        {
          ID: 4,
          Name: "王四虎",
          Sex: 0,
          age: 16,
        },
        {
          ID: 5,
          Name: "王五虎",
          Sex: 0,
          age: 14,
        },
      ],
      tablelist: [],
      searchtables: [],
    };
  },
  created() {
    this.render();
  },
  methods: {
    render() {
      this.tablelist = this.tableDatas;
    },
    // 新增
    addclick() {
      this.change = true;
      this.title = "新增信息";
      this.addshow = true;
      this.changeshow = false;
      this.disabled = false;
      this.form = {
        ID: "",
        Name: "",
        Sex: "",
        age: "",
      };
    },
    // 修改
    changeclick(val) {
      this.change = true;
      this.title = "修改信息";
      this.changeshow = true;
      this.addshow = false;
      this.disabled = true;
      this.form.ID = val.ID;
      this.form.Name = val.Name;
      this.form.Sex = val.Sex;
      this.form.age = val.age;
      this.val = val;
    },
    // 确认修改
    changebtn() {
      this.val.Name = this.form.Name;
      this.val.Sex = this.form.Sex;
      this.val.age = this.form.age;
      this.change = false;
      this.$message({
        message: "修改成功",
        type: "success",
      });
    },
    // 确认添加
    addbtn() {
      this.change = false;
      if (
        this.form.ID == "" &&
        this.form.Name == "" &&
        this.form.Sex == "" &&
        this.form.age == ""
      ) {
        this.$message({
          message: "添加失败，请不要留空白",
          type: "warning",
        });
      } else {
        this.$message({
          message: "添加成功",
          type: "success",
        });
        this.tableDatas.push(this.form);
      }
      console.log(this.form);
    },
    // 删除所点击的行
    delclcik(index) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableDatas.splice(index, 1),
            this.$message({
              type: "success",
              message: "删除成功!",
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //搜索
    searchclick() {
      if (this.input == "") {
        this.$message.warning("查询条件不能为空！");
        return;
      }
      this.tablelist = [];
      this.searchtables = [];
      this.tableDatas.forEach((v) => {
        if (v.Name) {
          if (v.Name.indexOf(this.input) >= 0) {
            console.log(v.Name);
            this.searchtables.push(v);
            this.tablelist = this.searchtables;
          }
        }
      });
    },
  },
};
</script>

<style scoped>
#app {
  width: 500px;
}
.header {
  display: flex;
  justify-content: space-between;
}
.search-inp {
  width: 300px;
}
</style>
